<template>
  <!-- 小米手机开始 -->
  <div class="shouji">
    

    <div v-for="p in prods" :key="p.id" class="prod qian" @click="toDetail(p.id)">
      <img width="200px" height="230px" :src="p.prodImage" alt="" />
      <h4>{{ p.prodName }}</h4>
      <p>{{ p.price }}</p>
    </div>

    <h6 style="clear: both"></h6>
  </div>
  <!-- 小米手机结束-->
</template>

<script>
export default {
  data() {
    return {};
  },

  props: ["prods", "typeurl"],

  components: {},

  methods: {
    toDetail(id){
      this.$router.push("/detail/"+id)
    }
  },
};
</script>

<style scoped>
.shouji {
  width: 992px;
  margin: auto;
  margin-top: 20px;

  /* border: 1px red solid; */
  background-color: #f5f5f5;
}


.shouji .prod {
  text-align: center;

  width: 234px;
  height: 300px;

  box-sizing: border-box;

  float: left;
  margin-left: 14px;
  background-color: #fff;

  transition: 0.3s;
}
.shouji .prod img {
  margin-top: 15px;
}
.shouji .prod h4 {
  margin-top: 6px;
}
.shouji .qian {
  margin-bottom: 16px;
}

.shouji .prod:hover {
  /* margin-top:-2px; */
  transform: translateY(-1px);
  box-shadow: 0px 0px 30px black;
}

.shouji #yi {
  margin-left: 0px;
}

.shouji .prod h4 {
  font-weight: normal;
  font-size: 12px;
}

.shouji .prod p {
  margin: 6px 0px;
}

.shouji .prod p:nth-of-type(1) {
  font-size: 6px;
  color: #999;
}

.shouji .prod p:nth-of-type(2) {
  font-size: 10px;
  color: orangered;
}

.shouji .prod p:nth-of-type(2) span {
  font-size: 8px;
  color: #999;
  text-decoration: line-through;
  margin-left: 5px;
}

.shouji .cls {
  height: 0px;
  clear: both;
}
</style>